<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Ext JS 4 Themes</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all-gray.css" />

    <!-- GC -->


        <script type="text/javascript" src="../../ext-all.js"></script>

        <script type="text/javascript" src="themes.js"></script>

        <style>
            h1 a:link, h1 a:visited {
                color: #046BCA;
            }

            h1 a:hover, h1 a:focus, h1 a:active {
                color: #1C417C;
            }

            div#header {
                height: 65px;
                padding: 25px 0 10px 0;
                width: 1090px;
                margin: 0 50px -5px 50px;
            }
            #main-container {
				margin-left: 30px;
            }
            div#header h1 {
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 24px;
                font-weight: 600;
            }
            form#styleswitcher {
                background-color: #f3f3f3;
                background-color: rgba(243,243,243,.333);
                border: 1px solid #ddd;
                border-color: rgba(221,221,221,.333);
                border-radius:         8px;
                -moz-border-radius:    8px;
                -ms-border-radius:     8px;
                -o-border-radius:      8px;
                -webkit-border-radius: 8px;

                float: right;
                padding: 8px 10px;

                width: auto;
            }
            form#styleswitcher select {
                font-size: 13px;
                line-height: 13px;
            }
            div#header h1 span {
                color: inherit;
                font-family: Helvetica, Arial, sans-serif;
                font-size: 13px;
                font-weight: normal;
                line-height: 30px;
                padding-left: 25px;
            }
        </style>
    </head>
    <body>

        <div id="header">
            <form id="styleswitcher">
                <label for="styleswitcher_select">Choose Theme: </label>
                <select name="styleswitcher_select" id="styleswitcher_select">
                    <option value="index.html" selected="true">Classic Theme</option>
                    <option value="index-gray.html" selected="true">Gray Theme</option>
                    <option value="index-access.html">Accessibility Theme</option>
                </select>
            </form>
            <h1>Ext JS Themes <span>View and test every Ext component against bundled <a href="http://www.sencha.com/products/extjs/themes/">Ext Themes</a>, or, your own custom themes.</span></h1>
        </div>

    </body>
</html>
